<template>
    <div class="notice-edit-container">
        <el-form
            ref="ruleFormRef"
            :model="data.notice"
            :rules="data.rules"
            label-width="120px"
            style="width: 100%; display: flex; flex-wrap: wrap"
        >
            <el-form-item label="消息类型：" prop="type" style="width: 100%">
                <div class="notice-input1">
                    <el-select
                        v-model="data.notice.type"
                        style="width: 100%"
                        placeholder="选择消息类型"
                        @change="data.onSelectNotice"
                    >
                        <el-option
                            v-for="item in data.options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </div>
            </el-form-item>
            <el-form-item label="消息标题：" prop="title" style="width: 100%">
                <div class="notice-input">
                    <el-input
                        placeholder="请输入标题"
                        maxlength="20"
                        show-word-limit
                        clearable
                        v-model="data.notice.title"
                    ></el-input>
                </div>
            </el-form-item>
        </el-form>

        <div class="notice-title">
            <div class="title">
                <i>*</i>
                <p>消息内容：</p>
            </div>
            <div class="content">
                <TinymceVue :content="data.noticeContent" @update="data.onContentUpdate" />
            </div>
        </div>

        <div class="btn">
            <el-button type="primary" @click="onConfirm(ruleFormRef)">保存</el-button>
            <el-button @click="onCancel">取消</el-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import TinymceVue from '@/components/Tinymce.vue'
import { FormInstance } from 'element-plus'
import { routerStore } from '@/store/router.store'
import router from '@/router'
import NoticeEdit from '.'
const _routerStore = routerStore()

/**
 * form表单实例
 */
const ruleFormRef = ref<FormInstance>()

/**
 * 初始化数据
 */
const data = reactive(new NoticeEdit())

/**
 * 监听点击保存
 * @param formEl
 */
const onConfirm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            data.onSubmit(() => {
                //重置表单
                //formEl.resetFields()
                onCancel()
            })
        } else {
            console.log('error submit！', fields)
        }
    })
}
const onCancel = () => {
    console.log(_routerStore.selectIndex)
    _routerStore.removeHeaderRoute(_routerStore.selectIndex)
    router.push('/operation/notice')
}
</script>

<style scoped lang="scss">
.count {
    margin-left: 10px;
}
.notice-edit-container {
    box-sizing: border-box;
    padding: 16px;
    background-color: var(--color-white);
    height: 100%;

    .notice-line {
        display: flex;
        margin: 16px 0;
    }

    .notice-input1 {
        width: 320px;
        display: flex;
        align-items: center;
    }
    .notice-input {
        width: 320px;
        display: flex;
        align-items: center;
    }

    .notice-title {
        display: flex;
        width: 100%;
        font-size: 14px;

        i {
            color: var(--color-danger);
            padding: 0 4px 0 0;
        }

        .title {
            font-size: 14px;
            width: 120px;
            display: flex;
            justify-content: end;
            height: 32px;
            line-height: 32px;
            padding: 0 12px 0 0;
            box-sizing: border-box;
        }
        .content {
            width: calc(100% - 120px);
        }
    }

    .btn {
        padding: 32px 0;
        text-align: center;
    }
}
</style>
